<template>
    <div>
            <img :src="arr[0]" alt="" class="img1">
            <img :src="arr[1]" alt="" class="img2">
            <img :src="arr[2]" alt="" class="img3">
            <img :src="arr[3]" alt="" class="img4">
            <img :src="arr[4]" alt="" class="img5">
            <img :src="arr[5]" alt="" class="img6">
            <img :src="arr[6]" alt="" class="img7">
            <img :src="arr[7]" alt="" class="img6">
            <img :src="arr[8]" alt="" class="img7">

        
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.demo1;
        })
    }
}
</script>

<style scoped>
    .img1{
        width: 100%;
        height: 4rem;
    }
    .img2{
        width: 100%;
        height: 0.58rem;
    }
    .img3{
        width: 100%;
        height: 0.82rem;
    }
    .img4{
        width: 100%;
        height: 0.78rem;
    }
    .img5{
        width: 100%;
        height: 1.12rem;
    }
    .img6{
        width: 100%;
        height: 1.46rem;
        vertical-align: bottom;
    }
    .img7{
        width: 100%;
        height: 3.53rem;
        vertical-align: bottom;
    }
</style>